<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="发布案例" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box">
			<u-form :model="form" ref="uForm" class="form">
				
				<u-form-item type="select" :border-bottom="false" class="form-item" prop="case_type">
					<view class="form-content">
						<view class="form-lable">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_case.png" style="width: 34rpx;height: 34rpx;"></image>
						</view>
						<view class="form-data">
							<u-input v-model="form.case_type" disabled="true" placeholder="选择案例类型（必选）"  @click="show_case_type = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="decorationMeth">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">装修方式</text>
						</view>
						<view class="form-data flex justify-end">
							<u-radio-group  active-color='#FFB81E' v-model="form.decorationMeth">
								<u-radio name="整装">整装</u-radio>
								<u-radio name="自装">自装</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-gap height="20" bg-color="#F7F7F7"></u-gap>
				<u-form-item :border-bottom="false" class="form-item" prop="unit_type">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">选择户型</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.unit_type" disabled="true" placeholder="请选择户型"  @click="show_unitTyp = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="balcony">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">选择阳台</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.balcony" disabled="true" placeholder="请选择阳台"  @click="show_balcony = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="clrSys">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">选择色系</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.clrSys" disabled="true" placeholder="请选择色系"  @click="show_clrSys = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="style">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">选择风格</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.style" disabled="true" placeholder="请选择风格"  @click="show_style = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-gap height="20" bg-color="#F7F7F7"></u-gap>
				<u-form-item :border-bottom="false" class="form-item" prop="budget">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">预算价位</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.budget" placeholder="请输入预算价位"/>
						</view>
						<text class="end-text">万</text>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="city">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">所在城市</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.city" disabled="true" placeholder="请选择所在城市"  @click="show_city = true"/>
						</view>
						<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="address">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">详细地址</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.address" placeholder="请输入详细地址"/>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="area">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">房屋面积</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.area" placeholder="请输入房屋面积"/>
						</view>
						<text class="end-text">m²</text>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="price">
					<view class="form-content">
						<view class="form-lable">
							<text class="form-lable-text">房屋价格</text>
						</view>
						<view class="form-data">
							<u-input v-model="form.price" placeholder="请输入房屋价格"/>
						</view>
						<text class="end-text">元</text>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="casedescr">
					<view class="form-content flex-wrap border-bottom-none">
						<view class="form-lable margin-top-lg">
							<text class="form-lable-text">案例描述</text>
						</view>						
						<text class="end-text end-tipc">0/100</text>
						<view class="form-data row-data">
							<textarea v-model="form.casedescr" placeholder-style="color:#C6C6C6" placeholder="请简单描述你的案例..." class="textarea" ></textarea>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item">
					<view class="form-content flex-wrap border-bottom-none">
						<view class="form-lable">
							<text class="form-lable-text">上传图片</text>
						</view>						
						<text class="end-text end-tipc">最多10张</text>
						<view class="form-data form-layout">
							<view class="upload-box">
								<u-upload
									width="156"
									height="156"
									max-count="10"
									ref="uUpload"
									action="#"
									:auto-upload="auto_upload"
									upload-text=" "
								 ></u-upload>
							 </view>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item">
					<view class="form-content flex-wrap border-bottom-none">
						<button class="circle-btn" @click="submit()">确定</button>
					</view>
				</u-form-item>
				
			</u-form>
			<!-- 选择器 -->
			<view class="picker-box">
				<u-select confirm-color="#FFB81E" v-model="show_case_type" :list="case_type_list" @confirm="case_type_confirm"></u-select>
				<u-select confirm-color="#FFB81E" v-model="show_unitTyp" :list="unitTyp_list" @confirm="unitTyp_confirm"></u-select>
				<u-select confirm-color="#FFB81E" v-model="show_balcony" :list="balcony_list" @confirm="balcony_confirm"></u-select>
				<u-select confirm-color="#FFB81E" v-model="show_clrSys" :list="clrSys_list" @confirm="clrSys_confirm"></u-select>
				<u-select confirm-color="#FFB81E" v-model="show_style" :list="style_list" @confirm="style_confirm"></u-select>
				<u-picker confirm-color="#FFB81E" mode="region" v-model="show_city" @confirm="city_confirm"></u-picker>
			</view>
			<!-- 我的案例 -->
			<navigator url="./my_case" hover-class="none" class="mycase flex align-center">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_mycase.png" style="width: 40rpx;height: 40rpx;"></image>
				<text style="color: #a0683f;" class="f26 margin-left-sm">我的案例</text>
			</navigator>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				case_type:'',
				decorationMeth:'',
				unit_type:'',
				balcony:'',
				clrSys:'',
				style:'',
				budget:'',
				city:'',
				address:'',
				area:'',
				price:'',
				casedescr:'',
				image:[],
			},
			rules: {
				case_type: [
					{
						required: true, 
						message: '选择案例类型', 
						trigger: 'blur'
					}
				],
				decorationMeth: [
					{
						required: true, 
						message: '请选择装修方式', 
						trigger: 'blur'
					}
				],
				unit_type: [
					{
						required: true, 
						message: '请选择户型', 
						trigger: 'blur'
					}
				],
				balcony: [
					{
						required: true, 
						message: '请选择阳台', 
						trigger: 'blur'
					}
				],
				clrSys: [
					{
						required: true, 
						message: '请选择色系', 
						trigger: 'blur'
					}
				],
				style: [
					{
						required: true, 
						message: '请选择风格', 
						trigger: 'blur'
					}
				],
				budget: [
					{
						required: true, 
						message: '请输入您的预算', 
						trigger: 'blur'
					}
				],
				city: [
					{
						required: true, 
						message: '请选择所在城市', 
						trigger: 'blur'
					}
				],
				address: [
					{
						required: true, 
						message: '请输入详细地址', 
						trigger: 'blur'
					}
				],
				area: [
					{
						required: true, 
						message: '请输入房屋面积', 
						trigger: 'blur'
					}
				],
				price: [
					{
						required: true, 
						message: '请输入预约看房价格', 
						trigger: 'blur'
					}
				],
				casedescr: [
					{
						required: false, 
						message: '请简单描述你的案例', 
						trigger: 'blur'
					}
				]
			},
			case_type_list:[
				{
					value: '案例类型',
					label: '案例类型'
				},
				{
					value: '案例类型1',
					label: '案例类型1'
				}
			],
			show_case_type:false,
			unitTyp_list:[
				{
					value: '户型',
					label: '户型'
				},
				{
					value: '户型2',
					label: '户型2'
				}
			],			
			show_unitTyp:false,
			balcony_list:[
				{
					value: '阳台',
					label: '阳台'
				},
				{
					value: '阳台2',
					label: '阳台2'
				}
			],
			show_balcony:false,
			clrSys_list:[
				{
					value: '色系',
					label: '色系'
				},
				{
					value: '色系2',
					label: '色系2'
				}
			],			
			show_clrSys:false,
			style_list:[
				{
					value: '风格',
					label: '风格'
				},
				{
					value: '风格2',
					label: '风格2'
				}
			],
			show_style:false,
			show_city:false,
			auto_upload:false,
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		case_type_confirm(e) {
			this.form.case_type = e[0]['label'];
			//console.log(e);
		},
		unitTyp_confirm(e) {
			this.form.unit_type = e[0]['label'];
			//console.log(e);
		},
		balcony_confirm(e) {
			this.form.balcony = e[0]['label'];
			//console.log(e);
		},
		clrSys_confirm(e) {
			this.form.clrSys = e[0]['label'];
			//console.log(e);
		},
		style_confirm(e) {
			this.form.style = e[0]['label'];
			//console.log(e);
		},
		city_confirm(e){
			let province = e.province.label
			let city = e.city.label
			let area = e.area.label
			this.form.city = province + "-" + city + "-" + area;
			//console.log(e)
		},
		submit() {
			// let files = []
			// files = this.$refs.uUpload.lists;
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(this.form);
					uni.showToast({
						title: '提交成功',
						icon:"none"
					});
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.form{
		/deep/.u-form-item{
			padding: 0;
			line-height: 0;
		}
		.form-content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 22rpx;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #F2F2F2;
			width: 100%;
			.form-lable{
				display: flex;
				align-items: center;
				white-space: nowrap;
				margin-right: 30rpx;
				.form-lable-text{					
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Medium;
				}
			}
			.form-data{
				width: 100%;
				padding: 0 30rpx 0 52rpx;
			}
			.end-tipc{
				color: #999999;
			}
			.end-text{
				margin-right: 20rpx;
			}
			.row-data{
				padding: 0;
				overflow: hidden;
				margin-top: 50rpx;
				background: #f7f7f7;
				border-radius: 20rpx;
				box-sizing: border-box;
				.textarea{
					height: 300rpx;		
					padding: 42rpx 28rpx;
					width: 100%;
				}
			}
			.form-layout{
				padding-left: 0;
				margin-top: 50rpx;
			}
			.circle-btn{
				background: #4a515b !important;
				color: #FFFFFF;
				border-radius: 45rpx;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 90rpx;
				margin: 98rpx 0 50rpx;
				width: 100%;
				font-family: PingFang SC, PingFang SC-Bold;
			}
		}
		.border-bottom-none{
			border: none;
		}			
	}
	.mycase{
		position: fixed;
		top: 28%;
		right: 0;
		height: 60rpx;
		background: #ffd4b5;
		border-radius: 30rpx 0px 0px 30rpx;		
		padding: 10rpx 36rpx 10rpx 14rpx ;
		z-index: 9;
	}	
}
</style>
